<template>
    <div class="body">
<!--        简介    -->
        <a-card hoverable class="summary">
            <a-breadcrumb separator=">">
                <a-breadcrumb-item>首页</a-breadcrumb-item>
                <a-breadcrumb-item>全部课程</a-breadcrumb-item>
                <a-breadcrumb-item>零基础实践深度学习</a-breadcrumb-item>
            </a-breadcrumb>
            <a-row>
                <a-col :span="5" class="img">
                    <a-image
                        :src="myData.lessonImg"
                        fallback=""
                    />
                </a-col>
                <a-col :span="0"></a-col>

                <a-col :span="16" class="summary-item">
                    <a-row>
                        <a-col :span="16">
                            <h2 style="font-weight: bolder;">{{myData.lessonTitle}}</h2>
                            <h3>{{myData.subtitle}}</h3><br>
                            <div>
                                <a-rate style="opacity: 1" :value="myData.grade/2" allow-half disabled />
                                {{myData.grade}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;讲师：{{myData.lecturer}}
                            </div><br><br>
                            <h3>{{myData.description}}</h3><br><br>
                            <h1 style="font-size: 30px; color: red; font-weight: bolder;display: inline" >￥{{currentPrice}}&nbsp;&nbsp;&nbsp;</h1>
                            <h2 style="display: inline;text-decoration: line-through;opacity: 0.5">原价 ￥{{originalPrice}}</h2>

                        </a-col>
                        <a-col :span="8">
                            <div style="float: right;">
                                <a-button type="text" @click="collection" >收藏</a-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <a-button type="text" @click="share" >分享</a-button>
                            </div>
                            <div style="float: right;margin-top: 20vh">
                                <h3 style="font-size: 16px; color: orange;opacity: 1;display: inline">{{myData.peopleCounting}}人已加入</h3>&nbsp;&nbsp;
                                <a-button style="display: inline" type="primary" shape="round" size="large" @click="join">
                                    立即加入
                                </a-button>
                            </div>
                        </a-col>
                    </a-row>

                </a-col>
            </a-row>

        </a-card>        <!-- /课程简介 -->

        <a-row  align="top" >
            <a-col :span="18">
                <!-- 导航 -->
                <a-card hoverable size="small" class="navigation">
                    <a-space>
                        <a-button :type="(selectedKey == '1') ? primary : text" shape="round" size="large" @click="selectedKey=['1']">
                            课程介绍
                        </a-button>

                        <a-button :type="(selectedKey == '2') ? primary : text" shape="round" size="large" @click="selectedKey=['2']">
                            章节目录
                        </a-button>

                        <a-button :type="(selectedKey == '3') ? primary : text" shape="round" size="large" @click="selectedKey=['3']">
                            讨论区
                        </a-button>

                        <a-button :type="(selectedKey == '4') ? primary : text" shape="round" size="large" @click="selectedKey=['4']">
                            评价
                        </a-button>
                    </a-space>
                </a-card>
                <!-- 视图 -->
                <a-card hoverable size="small" class="views">

                    <!-- 课程介绍 -->
                    <div class="content" v-if="selectedKey == '1'" v-html="myData.lessonViews"></div>

                    <!-- 章节目录 -->
                    <div class="catalogue" v-else-if="selectedKey == '2'" v-html="myData.catalogue"></div>

                    <!-- 评论 -->
                    <div class="comment" v-else-if="selectedKey == '3'" v-html="myData.comment"></div>

                    <!-- 评价 -->
                    <div class="evaluate" v-else-if="selectedKey == '4'" v-html="myData.evaluate"></div>
                </a-card>
            </a-col>

            <a-col :span="6">
                <!-- 课程须知 -->
                <a-card hoverable size="small" class="notice">    <!-- 课程须知 -->
                    <h3 class="titles">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;课程须知</h3>
                    <hr>
                    <h3 style="padding-left: 20px;margin-right: 8px" v-html="myData.lessonNotice">

                    </h3>
                </a-card>
                <!-- 相关推荐 -->
                <a-card hoverable size="small" class="recommend">   <!-- 相关推荐 -->
                    <h3 class="titles">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;推荐课程</h3>
                    <hr>

                        <div v-for="item in myData.recommend" style="margin-left: 15px" key="item.id">
                            <a-row class="avatar" >
                                <a-col :span="5">
                                    <a-image
                                        :src="item.src"
                                    />
                                </a-col>
                                <a-col :span="1"></a-col>
                                <a-col :span="15" >
                                     <a class="name" href="javascript:void(0)">
                                        <h5 style="opacity: 0.5">&nbsp;{{item.recommendTitle}}</h5>
                                    </a>
                                    <a class="name" href="javascript:void(0)">
                                        <h6 style="opacity: 0.5">&nbsp;{{item.recommendSubTitle}}</h6>
                                    </a>
                                    <br>
                                </a-col>
                            </a-row>
                        </div>
                </a-card>
            </a-col>
        </a-row>
    </div>

</template>

<script>
import {computed, onBeforeMount, onMounted, reactive, ref, toRefs} from "vue";
import { message } from 'ant-design-vue';
import axios from "axios";

export default {
    name: 'HelloWorld',
    setup(){
        const state = reactive({
            myData: {},
            currentPrice: 0,
            originalPrice: 0,
            selectedKey:['1'],
            primary: 'primary',
            text: 'text'
        });

        const getCourseInfoData = function (){
            axios.get('/courseInfo.json').then(res =>{
                //console.log("getCourseInfoData" + JSON.stringify(res))
                state.myData = res.data.data
                state.currentPrice = state.myData.currentPrice.toFixed(2)
                state.originalPrice = state.myData.originalPrice.toFixed(2)
                state.selectedKey = state.myData.selectedKey
                console.log("myData" + JSON.stringify(state.myData))
            }).catch(error =>{
                console.log("错误" + error)
            })
            // const appData = require('../../public/courseInfo.json')
            // res = appData.data
        }
        onBeforeMount(()=>{
            getCourseInfoData()
        });

        const join =() =>{
            message.success('加入课程成功');
        };

        const collection = () => {
            message.success('已收藏')
        };

        const share = () =>{
            message.success('已分享')
        };


        return{
            // lessonTitle,subtitle,grade,lecturer,description,currentPrice,originalPrice,peopleCounting,selectedKey,primary,text,recommend,
            ...toRefs(state),
            join,
            collection,
            share
        }
    },
}

</script>


<style scoped>
.crumbs{
    width: 100%;
    background-color: white;
}
.crumb{
    margin-top: 20px;
    margin-left: 200px;
    margin-bottom: 20px;
}

.titles{
    opacity: 1; padding-bottom: 10px;
    padding-top: 5px;
}

.body{
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
}

.summary{
    height: auto;
    /*width: 1260px;*/
    background-color: white;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 12px
}

a{
    font-size: 12px;
    color: darkgrey;
}

.summary-item{
    /*width: 80vm;*/
    margin-left: 20px;
    margin-top: 0px;
    line-height: 17px;
}
h3{
    opacity: 0.5;
}

.navigation{
    height: auto;
    background-color: white;
    margin-left: 170px;
    margin-top: 30px;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 12px
}

.notice{
    height: auto;
    background-color: white;
    margin-left: 15px;
    margin-right: 8vh;
    margin-top: 30px;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 12px
}

.views{
    height: auto;
    background-color: white;
    margin-left: 170px;
    margin-top: 30px;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 12px
}
.recommend{
    height: auto;
    background-color: white;
    margin-left: 15px;
    margin-top: 30px;
    margin-right: 8vh;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 10%);
    border-radius: 12px
}
.content{
    margin-top: 30px;
    margin-left: 20px;
}
</style>
